import React, { useState } from "react";
import { clueCompanyTypes, modalPropsType } from "@/constants/types";
import { Modal, Button } from "antd";


const isPhoneNumber = (str: string) => /^1\d{10}$/.test(str)

const ClueCall = ({visible, onCancel, dataSource, currentRow, onSubmit}: modalPropsType) => {
  const [currentIndex, setCurrentIndex] = useState<number>(dataSource?.findIndex((v: clueCompanyTypes) => v.id === currentRow));


  const nextStep = () => {
    const newIndex = currentIndex + 1;
    setCurrentIndex(newIndex);
    onSubmit(dataSource[newIndex]);
  }

  const curr = dataSource?.[currentIndex];
  const text = isPhoneNumber(curr?.mobile) ? curr?.mobile?.replace(/(\d{3})(\d{4})(\d{4})/, "$1 $2 $3") : curr?.mobile;

  return (
    <Modal
      open={visible}
      width="850px"
      onCancel={onCancel}
      footer={false}
    >
      <div className="modal-form-padding">
        <div style={{fontSize: '25px'}}>手机号:  <span style={{letterSpacing: '15px', fontSize: '50px', fontWeight: 'bold'}}>{text}</span></div>
        <div style={{fontSize: '25px'}}>呢称/姓名: {curr.nickName}</div>
        <div style={{fontSize: '25px'}}>公司名称: {curr.fullName}</div>
        {currentIndex < (dataSource?.length - 1) && (
           <div style={{display: 'flex', justifyContent: 'center', marginTop: '30px'}}>
            <Button type="primary" size="large" style={{width: '300px'}} onClick={nextStep}>已打，下一条</Button>
          </div>
        )}

      </div>
    </Modal>
  );
}
export default ClueCall;